<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="apple-mobile-web-app-status-bar-style" content="blank">
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>积分商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/integralShop.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/flexible_css.js"></script>
    <script src="js/flexible.js"></script>

    <style>
        body{
            /* position: relative; */
            /* height: 100%;
            width: 100%; */
        }
        .diaolog{
            background: rgba(0, 0, 0, 0.4);
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
        }
        .cot{
            width: 8rem;
            /* height: 300px; */
            background: white;
            position: absolute;
            top: calc(50% - 150px);
            left: calc(50% - 4rem);
            z-index: 999999
        }
      
        .cot-box{
            text-align: center;
            padding-bottom: .4rem
            
        }
        
        .btns{
            width: 100%;
            height: 1.066667rem;
        }
        .btns button{
            float: left;
            width: 50%;
            text-align: center;
            height: 100%;
            border: none;
        }
        .img{
            width:100%;
            height: 4rem;
        }
        .cot-box img{
            width:auto;
            height: 4rem;
        }
        .address{
            padding: .266667rem 0; 
            width: 100%;
            height: 2rem;
            border-bottom: 1px solid #efefef;
            box-sizing: border-box;
        }
        .address .address-img{
            width: 15%;
            height: 100%;
            float: left;
            text-align: center;
            box-sizing: border-box;
            line-height: 2rem;
        }
        .address-img img{
            text-align: center;
            width:.546667rem;
            height: .653333rem;
           
        }
        .address-cont{
            float: left;
            width: 70%;
        }
        .address-cont p{
            font-size: .293333rem;
            color: #333;
                 
        }
        .address-cont p span{
            float: right;
          
        }
    </style>

</head>
<body ontouchstart>

    <div class="wrap">
      
       
      <div class="shopContent">
        <ul>
            <li>
                <img src="./images/commodity@2x.png" alt="不好意思图裂了">
                <section>
                    <p>法国微红葡萄酒01</p>
                    <div> <span>1800积分</span> <button>兑换</button> </div>
                </section>
            </li>
            <li>
                <img src="./images/commodity@2x.png" alt="不好意思图裂了">
                <section>
                    <p>法国微红葡萄酒02</p>
                    <div> <span>2800积分</span> <button>兑换</button> </div>
                </section>
            </li>
            <li>
                    <img src="./images/commodity@2x.png" alt="不好意思图裂了">
                    <section>
                        <p>法国微红葡萄酒03</p>
                        <div> <span>3800积分</span> <button>兑换</button> </div>
                    </section>
            </li>
            <li>
                     <img src="./images/commodity@2x.png" alt="不好意思图裂了">
                    <section>
                        <p>法国微红葡萄酒04</p>
                        <div> <span>4800积分</span> <button>兑换</button> </div>
                    </section>
            </li>
            <li>
                        <img src="./images/purchase_commodity_1@2x.png" alt="不好意思图裂了">
                        <section>
                            <p>法国微红葡萄酒</p>
                            <div> <span>2800积分</span> <button>兑换</button> </div>
                        </section>
            </li>
            <li>
                         <img src="./images/purchase_commodity_2@2x.png" alt="不好意思图裂了">
                        <section>
                            <p>法国微红葡萄酒</p>
                            <div> <span>2800积分</span> <button>兑换</button> </div>
                        </section>
            </li>
            <li>
                    <img src="./images/commodity@2x.png" alt="不好意思图裂了">
                   <section>
                       <p>法国微红葡萄酒</p>
                       <div> <span>2800积分</span> <button>兑换</button> </div>
                   </section>
            </li>
            <li>
                    <img src="./images/commodity@2x.png" alt="不好意思图裂了">
                   <section>
                       <p>法国微红葡萄酒</p>
                       <div> <span>2800积分</span> <button>兑换</button> </div>
                   </section>
            </li>   
        </ul>

      </div>

       <!-- 公共的页脚 -->
       <div class="footer">
        <ul>
            <li>
                <a  href="index.html">
                    <img src="./images/bottomnav_home@2x.png" alt="不好意思图裂了">
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="./wodedingdan.html">
                    <img src="./images/bottomnav_order@2x.png" alt="不好意思图裂了">
                    <p>订单</p>
                </a>
            </li>
            <li>
                <a class="act" href="./integralShop.html">
                    <img src="./images/bottomnav_integral_select@2x.png" alt="不好意思图裂了">
                    <p>积分商城</p>
                </a>
            </li>
            <li>
                <a href="./personCenter.html">
                    <img src="./images/bottomnav_user@2x.png" alt="不好意思图裂了">
                    <p>个人中心</p>
                </a>
            </li>
        </ul>
    
       </div>
    </div>
    
    <div class="diaolog hide">
         <div class="cot">
             <div class="address clearFloat">
                 <div class="address-img"> <img src="./images/address@2x.png" alt="你炸了"></div>
                 <div class="address-cont">
                     <p>收货人:小悟空 <span>153548796916</span></p>
                     <p>收货地址:河南剩电子商务产业园20楼浪博科技电子有限公司</p>
                </div>
                <div class="address-img Fright"> <img src="./images/go@2x.png" alt="你炸了"></div>

            </div>
             <div class="cot-box">
                    
                    <div class="img">
                        <img src="" alt="79979">
                    </div>
                    <p id="name"></p>
                    <p>x1</p>
                    <p style="color:#ff3737;" id="price"></p>
                    <span style="text-align: right;font-size: .266667rem;color: #999;padding-right: .266667rem">温馨提示:该商品属于促销商品不支持退货哦</span>
             </div>
            <div class="btns">
                <button id="cancel" style="background: #efefef;font-size: .32rem; color: #333;">取消</button>
                <button style="background: #ff3737;font-size: .32rem; color: #fff;">确认</button>
            </div>
         </div>
    </div>

    <script src="js/swiper-3.4.2.min.js"></script>
    <!-- 以前的点击显示弹出框 -->
    <!-- <script>
    
        // 点击兑换按钮，弹出层显示 并展示对应的商品信息
      $(' .shopContent button').click(function () {
          $('.diaolog').toggle('hide');
        //   $('.cot').toggle('hide')
            var name =   $(this).parent().parent().find('p').html();
            var img =  $(this).parent().parent().parent().find('img').attr('src');
            var price = $(this).parent().find('span').html();
            console.log(price);
            $('.img img').attr('src',img);
            $('#name').html(name);
            $('#price').html(price);
            document.body.style.overflow='hidden';
            document.body.style.height='100%';
            //手机端禁止滚动条 未测试
            $('.diaolog').on("touchmove",function(e){
                e.preventDefault();
                })
      })
      //点击取消按钮 隐藏 弹出层
      $('#cancel').click( function() {
        $('.diaolog').toggle('hide');
        document.body.style.overflow='scroll';
        //手机端解除禁止滚动条 未测试
         $('.diaolog').off('touchmove')
      })

    
    </script> -->

   <script>
    $('.shopContent ul li section div > button').on('click',function(){
           window.location.href="http://192.168.0.38:8000/goodsDetail.html"
    })
   </script>
</body>
</html>
